<template>
    <div id="zxTongji">
        <div class="heightChart">
            <div class="title">反应形式</div>
            <div class="navboxes">
                <div class="navbox" v-for="(item,index) in list" :key="index">
                    <div class="navbox-box">
                        <div><img class="navbox-img" :src="item.imgs"></div>
                        <span class="navbox-name">{{item.name}}</span>
                        <div class="navbox-num">{{item.num}}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getRebackForm} from "../../../network/home";
    export default {
        name: "zxTongji",
        data() {
            return {
                list: [
                    // {id: 1, 'imgs': require('../../../assets/img/worktake/a1.png'), name: '微信', num: '88'},
                    // {id: 2, 'imgs': require('../../../assets/img/worktake/a2.png'), name: '互联网', num: '88'},
                    // {id: 3, 'imgs': require('../../../assets/img/worktake/a3.png'), name: '电话', num: '68'},
                    // {id: 4, 'imgs': require('../../../assets/img/worktake/a4.png'), name: '留言', num: '58'},
                    // {id: 5, 'imgs': require('../../../assets/img/worktake/a5.png'), name: 'APP', num: '84'},
                    // {id: 6, 'imgs': require('../../../assets/img/worktake/a6.png'), name: '热线', num: '58'},
                    // {id: 6, 'imgs': require('../../../assets/img/worktake/a6.png'), name: '热线', num: '58'},
                    // {id: 6, 'imgs': require('../../../assets/img/worktake/a6.png'), name: '热线', num: '58'},
                    // {id: 6, 'imgs': require('../../../assets/img/worktake/a6.png'), name: '热线', num: '58'},
                    // {id: 6, 'imgs': require('../../../assets/img/worktake/a6.png'), name: '热线', num: '48'},
                ],
                timer: null,

            }
        },
        mounted() {
            this.getRebackForm()

            this.timer = setInterval(() => {
                this.getRebackForm();
            }, 30000);

        },
        beforeDestroy() {
            if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
                clearInterval(this.timer); //关闭
                console.log('左上关闭')
            }

        },
        methods: {
            getRebackForm() {
                getRebackForm().then(res => {
                    if (res.code == '200') {
                        // console.log(res.data)
                        this.list = []
                        for (var i = 0; i < res.data.length; i++) {
                            if (res.data[i].imgs == 'rebackFormPhone') {//电话
                                res.data[i].imgs = require('../../../assets/img/worktake/s3.png')
                                this.list.push(res.data[i])
                            } else if (res.data[i].imgs == 'rebackForm12345') {//12345
                                res.data[i].imgs = require('../../../assets/img/worktake/s10.png')
                                this.list.push(res.data[i])
                            } else if (res.data[i].imgs == 'rebackFormWeChat') {//微信
                                res.data[i].imgs = require('../../../assets/img/worktake/s8.png')
                                this.list.push(res.data[i])
                            } else if (res.data[i].imgs == 'rebackFormNetwork') {//网络
                                res.data[i].imgs = require('../../../assets/img/worktake/s2.png')
                                this.list.push(res.data[i])
                            }
                        }
                        // console.log(this.list)
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .heightChart {
        width: 610px;
        height: 210px;
        background: url("../../../assets/img/worktake/top.png");
        background-size: 610px 210px;
        position: relative;
    }

    .title {
        position: absolute;
        width: 100%;
        left: 0;
        right: 0;
        top: -5%;
        text-align: center;
        font-size: 22px;
        color: #F505ED;
    }

    .navboxes {
        font-size: 32px;
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;
        box-sizing: border-box;
    }

    .navbox {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 30px;
    }

    .navbox-box {
        /*width: 100%;*/
        display: flex;
        align-items: flex-end;
    }

    .navbox-img {
        width: 45px;
        height: 45px;
    }

    .navbox-name {
        width: 90px;
        font-size: 20px;
        color: #ffffff;
        opacity: 0.8;
        padding: 0 10px 0 20px
    }

    .navbox-num {
        width: 120px;
        font-size: 32px;
        color: #00F5FF;
        padding-top: 18px
    }
</style>
